<template>
  <div class="load-model">
    <el-input v-model="input" placeholder="请输入模型地址"></el-input>
    <el-button type="primary" :loading="loading" @click="load">加载</el-button>
  </div>
</template>

<script lang="ts">
import { _SceneManager } from "@/webgl";
import Vue from "vue";
export default Vue.extend({
  data() {
    let input = "./model/pagani_huayra-bc/scene.gltf";
    let loading = false;
    return { input, loading };
  },
  methods: {
    async load() {
      if (this.input) {
        const vue = this;
        vue.loading = true;
        await _SceneManager.loadGLTFModelToScene(this.input, function (e) {
          if (e.loaded / e.total >= 1) {
            vue.loading = false;
          }
        });
      } else {
        this.$message({
          message: "模型地址不能为空",
          type: "warning",
        });
      }
    },
  },
});
</script>
<style lang="scss" scoped>
.el-input {
  width: 300px;
  display: inline-block;
}
.el-button {
  display: inline-block;
}
</style>